<template>
    <pageLayoutContent>
        <div class="form">
            <a-select placeholder="型号" allowClear style="width: 132px"  @change="fromChange">
                <a-select-option :value="item.value" v-for="(item, key) in alarmType" :key="key">
                    {{item.label}}
                </a-select-option>
            </a-select>
            <i class="mp"></i>
            <a-input-search placeholder="IMEI号" style="width: 182px" @search="fromChange">
                <a-button slot="enterButton">
                    搜索
                </a-button>
            </a-input-search>
        </div>
        <pageTable :columns="columns"
                   ref="pageTable"
                   :api="equipmentList"/>
    </pageLayoutContent>
</template>
<script>
    function style({isHandling}, isBtn, btnBun) {
        if (isBtn) {
            return isHandling && !btnBun ? {} : !isHandling && btnBun ? {} : {
                display: 'none',
            }
        }
        if (isHandling) {
            return {
                color: '#000'
            }
        }
        return {
            color: '#a6a6a6',
        }
    }
    import pageTable from "@/components/pageTable/pageTable";
    import pageLayoutContent from "@/components/pageLayoutContent";
    import {alarmType} from '@/config/configuration'
    import {institutionsList} from "@/services/institutions";
    import {equipmentList} from "@/services/equipment";

    export default {
        components: {
            pageTable,
            pageLayoutContent
        },
        data() {
            const columns = [
                {
                    title: '设备型号',
                    dataIndex: 'model',
                    key: 'model',
                    style,
                    width: 200,
                    ellipsis: true,
                    fixed: 'left'
                },
                {
                    title: 'IMEI号',
                    style,
                    dataIndex: 'imei',
                    key: 'imei',
                },
                {
                    title: '导入时间',
                    dataIndex: 'dateTime',
                    style,
                    key: 'dateTime',
                },
                {
                    title: '设备状态',
                    style,
                    dataIndex: 'isHandling',
                    key: 'isHandling',
                    formatting: (t) => t ? '正常' : '禁用'
                },
                {
                    title: '操作',
                    key: 'id',
                    fixed: 'right',
                    width: 200,
                    render: 'btn',
                    btn: [
                        {
                            label: '重置', event: this.reset
                        },
                        {
                            label: '禁用', event: this.disable, style: (r) => style(r, true, 0)
                        },
                        {
                            label: '启用', event: this.enable, style: (r) => style(r, true, 1)
                        },

                    ]
                },
            ];
            return {
                alarmType,
                columns,
            };
        },
        created() {
            this.initOption()
        },
        methods: {
            initOption() {
                institutionsList().then(({data}) => {
                    this.institutionsTree = data.list;
                })
            },
            reset(record) {
                console.log(record);
                let _this = this;
                this.$confirm({
                    title: '确定重置此设备吗?',
                    content: '该设备可能被用户绑定，请谨慎操作！',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                        }).then(() => {
                            _this.$message.success('重置成功！');
                            _this.$refs['pageTable'].requestData();
                        }).catch(() => {
                            _this.$message.error('重置失败！')
                        });
                    },
                    onCancel() {},
                });
            },
            disable(record) {
                console.log(record);
                let _this = this;
                this.$confirm({
                    title: '确定禁用此设备吗?',
                    content: '该设备可能已被用户绑定，请谨慎操作！',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                        }).then(() => {
                            _this.$message.success('禁用成功！');
                            _this.$refs['pageTable'].requestData();
                        }).catch(() => {
                            _this.$message.error('禁用失败！')
                        });
                    },
                    onCancel() {},
                });
            },
            enable(record) {
                console.log(record);
                let _this = this;
                this.$confirm({
                    title: '确定启用此设备吗?',
                    content: '启用该设备，用户可绑定！',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                        }).then(() => {
                            _this.$message.success('启用成功！');
                            _this.$refs['pageTable'].requestData();
                        }).catch(() => {
                            _this.$message.error('启用失败！')
                        });
                    },
                    onCancel() {},
                });
            },
            equipmentList,
            fromChange(value) {
                console.log(value);
                this.$refs['pageTable'].requestData();
            },
        }
    };
</script>
<style lang="less">
    .form {
        height: 51px;
        border-bottom: 1px #e8e8e8 solid;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 15px;

        .mp {
            margin-left: 15px;
        }
    }

    .alarmRecord-table {
        margin: 0 0 0 18px;
    }


    .record-content {
        p {
            margin: 0;
            padding: 0;
        }
    }

    .ant-table-body {
        overflow: auto !important;
    }
</style>